<template>
  <div class="login">
    <div class="login-top">
      <img :src="url2" alt="" />
      <span>欢迎来到爱课！</span>
    </div>
    <div class="login-center">
      <input
        type="text"
        v-model="username.username"
        placeholder="请输入手机号"
      />
      <div class="sex">
        <input type="radio" name="sex" checked @click="handleman" />
        <span>男 </span>
        <input type="radio" name="sex" @click="handlewuman" />
        <span>女</span>
      </div>
      <input
        type="password"
        v-model="password.password"
        placeholder="请输入密码"
      />
      <input
        type="password"
        v-model="repass.repass"
        placeholder="请再次输入密码"
      />
      <button @click="handleclick">注册</button>
      <div class="goregistry" @click="gotologin">
        <span></span><span>>>>已有账号去登录</span>
      </div>
    </div>
  </div>
</template>
<script>
import { Dialog } from "vant";
import url2 from "../../assets/images/GrowingImages/成就-头像.png";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
export default {
  components: {},
  setup() {
    //注册功能
    const {
      username,
      password,
      repass,
      msg,
      handleclick,
      sex,
      handleman,
      handlewuman,
    } = registryfun();

    // 去注册页面
    const { gotologin } = gologin();

    return {
      url2,
      username,
      password,
      repass,
      msg,
      handleclick,
      sex,
      handleman,
      handlewuman,
      gotologin,
    };
  },
};
//注册功能的实现
const registryfun = () => {
  let sex = ref("");
  sex = "男";
  const handleman = () => {
    sex = "男";
  };
  const handlewuman = () => {
    sex = "女";
  };
  const username = reactive({
    username: "",
  });
  const password = reactive({
    password: "",
  });
  const repass = reactive({
    repass: "",
  });
  const router = useRouter();
  let msg = ref("");
  const handleclick = () => {
    const reg = /^1\d{10}$/;
    if (reg.test(username.username)) {
      if (password.password) {
        if (password.password == repass.repass) {
          localStorage.setItem("username", username.username);
          localStorage.setItem("sex", sex);
          localStorage.setItem("password", password.password);
          //   验证成功后跳转到登录界面
          router.push("/login");
        } else {
          msg = "两次密码不一致，请重新输入";
          password.password = "";
          repass.repass = "";
          Dialog({ message: msg });
        }
      } else {
        msg = "密码不能为空";
        Dialog({ message: msg });
      }
    } else {
      msg = "手机号码格式不对(由11位数字组成)";
      Dialog({ message: msg });
    }
  };
  return {
    username,
    password,
    repass,
    msg,
    handleclick,
    handleman,
    handlewuman,
    sex,
  };
};
// 点击去登录页面
const gologin = () => {
  const router = useRouter();
  const gotologin = () => {
    router.push("/login");
  };
  return { gotologin };
};
</script>
<style lang="less" scoped>
.login {
  padding: 37px;
  .login-top {
    display: flex;
    align-items: center;
    margin-top: 100px;
    img {
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }
  }
  .login-center {
    margin-top: 39px;
    input {
      width: 270px;
      line-height: 50px;
      margin-bottom: 10px;
      padding-left: 30px;
      font-size: 17px;
      border: 1px solid red;
    }
    button {
      width: 100%;
      border-radius: 50px;
      line-height: 50px;
      margin-top: 40px;
      border: 0;
      background-color: orange;
      color: white;
      font-size: 17px;
      font-weight: 900;
    }
    .sex {
      display: flex;
      align-items: center;
      line-height: 50px;
      border: 1px solid red;
      margin-bottom: 10px;
      padding-left: 30px;
      input {
        width: 20px;
        height: 20px;
        vertical-align: middle;
        margin-top: 10px;
      }
      span {
        font-size: 17px;
        margin-right: 40px;
        vertical-align: top;
        margin-left: 10px;
      }
    }
    .goregistry {
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      margin-top: 10px;
    }
    :hover {
      color: blue;
    }
  }
}
</style>
